<template>
	<view>
		<view class="activity-container">
			<view class="activity-header">
				<text class="fs-56 fs-strong">Welcome!</text>
				<view class="fs-28">
					<text>
						登记已经完成，您是本系统第
						<strong class="fs-lightblue">{{ userinfo.id }}</strong>
						位用户
					</text>
				</view>
			</view>
			<!-- 文章和活动列表 -->
			<!-- 没加入社团时的显示 -->
			<view v-if="userinfo.society_id === '0'">
				<NoSociety />
			</view>
			<view v-else class="activityAndArticle flex-column">
				<!-- 活动 -->
				<scroll-view class="activityAndArticle-list" scroll-y>
					<Acard
						v-for="(activity, index) in activities"
						:key="activity.id"
						pad="10px 12px"
						class="mb-5"
						:bgFilter="true"
						@tap.native="openActivity(activity)"
					>
						<view class="u-line-1">
							<u-tag
								:text="index > 3 ? '活动' : '最新活动'"
								size="mini"
								plain
								borderColor="#cacaca"
								class="activity-tag"
								color="#cacaca"
							></u-tag>
							{{ activity.title }}
						</view>
					</Acard>
				</scroll-view>

				<view class="fMore-wrap mb-20" @tap="getMoreActivities">
					<svg
						v-if="activityLimit < activityTotal"
						t="1663929170258"
						class="icon fMore"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="8236"
						width="16"
						height="16"
					>
						<path
							d="M474.288097 127.049604 857.759815 508.9792l-82.171488 81.8471L392.115586 208.894657 474.288097 127.049604zM857.759815 508.9792 474.288097 890.910842l-82.173534-81.84096L775.588327 427.134147 857.759815 508.9792zM435.55391 451.108165c32.088836 0 58.105373 25.908066 58.105373 57.871035 0 31.958876-26.016537 57.866942-58.105373 57.866942-32.090882 0-58.105373-25.908066-58.105373-57.866942C377.449561 477.016231 403.463028 451.108165 435.55391 451.108165zM241.8707 451.108165c32.092929 0 58.107419 25.908066 58.107419 57.871035 0 31.958876-26.013467 57.866942-58.107419 57.866942-32.088836 0-58.102303-25.908066-58.102303-57.866942C183.768397 477.016231 209.781864 451.108165 241.8707 451.108165z"
							p-id="8237"
							fill="#ffffff"
						></path>
					</svg>
					<view class="fs-24 ml-10">{{ activityLimit >= activityTotal ? '没有更多' : '更多' }}活动</view>
				</view>

				<!-- 文章 -->
				<scroll-view class="activityAndArticle-list" scroll-y>
					<Acard
						v-for="(article, index) in articles"
						:key="article.id"
						pad="10px 12px"
						class="mb-5"
						:bgFilter="true"
						@click.native="openArticle(article)"
					>
						<view class="text-line1">
							<u-tag
								:text="index > 3 ? '文章' : '最新文章'"
								size="mini"
								plain
								borderColor="#cacaca"
								class="activity-tag"
								color="#cacaca"
							></u-tag>
							{{ article.title }}
						</view>
					</Acard>
				</scroll-view>

				<view class="fMore-wrap" @click="getMoreArticles">
					<svg
						v-if="articleLimit < articleTotal"
						t="1663929170258"
						class="icon fMore"
						viewBox="0 0 1024 1024"
						version="1.1"
						xmlns="http://www.w3.org/2000/svg"
						p-id="8236"
						width="16"
						height="16"
					>
						<path
							d="M474.288097 127.049604 857.759815 508.9792l-82.171488 81.8471L392.115586 208.894657 474.288097 127.049604zM857.759815 508.9792 474.288097 890.910842l-82.173534-81.84096L775.588327 427.134147 857.759815 508.9792zM435.55391 451.108165c32.088836 0 58.105373 25.908066 58.105373 57.871035 0 31.958876-26.016537 57.866942-58.105373 57.866942-32.090882 0-58.105373-25.908066-58.105373-57.866942C377.449561 477.016231 403.463028 451.108165 435.55391 451.108165zM241.8707 451.108165c32.092929 0 58.107419 25.908066 58.107419 57.871035 0 31.958876-26.013467 57.866942-58.107419 57.866942-32.088836 0-58.102303-25.908066-58.102303-57.866942C183.768397 477.016231 209.781864 451.108165 241.8707 451.108165z"
							p-id="8237"
							fill="#ffffff"
						></path>
					</svg>
					<view class="fs-12 ml-10">{{ articleLimit >= articleTotal ? '没有更多' : '更多' }}文章</view>
				</view>
			</view>
			<!-- 粒子背景 -->
			<ParticleBackground></ParticleBackground>
		</view>
		<Tabbar></Tabbar>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	name: 'index',
	data() {
		return {
			activityLimit: 4, // 显示的活动数
			articleLimit: 4, // 显示的文章数
		};
	},
	mounted() {
		uni.stopPullDownRefresh();
		if (this.userinfo.society_id) {
			this.getActivites();
			this.getArticles();
		}
	},
	methods: {
		// 获取最新活动
		getActivites() {
			this.$store.dispatch('activity/getActivities', {
				society_id: this.userinfo.society_id,
				pageNo: 1,
				limit: this.activityLimit,
				onlyNotExpired: true,
				timestamp: Date.now(),
				needInforms: false
			});
		},
		// 获取最新文章
		getArticles() {
			this.$store.dispatch('article/getArticles', {
				society_id: this.userinfo.society_id,
				pageNo: 1,
				limit: this.articleLimit
			});
		},
		// 获取更多活动
		getMoreActivities() {
			this.activityLimit += 10;
		},
		getMoreArticles() {
			this.articleLimit += 10;
		},
		
		// 把用户点击的文章放进store 并跳转文章详细页
		openArticle(article) {
			this.$store.commit('article/SET_DISPLAYARTICLE',article)
			uni.navigateTo({
				url:'/pages/ArticleDetail/ArticleDetail'
			})
		},
		// 把用户点击的活动放进store 并跳转活动详细页
		openActivity(activity){
			this.$store.commit('activity/SET_DISPLAYACTIVITY',activity)
			uni.navigateTo({
				url:'/pages/ActivityDetail/ActivityDetail'
			})
		}
	},
	computed: {
		...mapState('user', ['userinfo']),
		...mapState('activity', ['activities', 'activityTotal']),
		...mapState('article', ['articles', 'articleTotal'])
	},
	watch: {
		activityLimit(newVal, oldVal) {
			if (oldVal < this.activityTotal) {
				this.getActivites();
			}
		},
		articleLimit(newVal, oldVal) {
			if (oldVal < this.articleTotal) {
				this.getArticles();
			}
		}
	}
};
</script>

<style scoped lang="scss">
.bg-aki {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 50% 50%;
}

.activity {
	&-container {
		position: relative;
		height: 100vh;
		color: #fff;
		padding: 30rpx;
		animation: FpulseSlowB infinite alternate 1s linear;
	}

	&-header {
		margin-bottom: 20px;
		height: 10vh;
	}

	&-tag {
		display: inline-block;
		margin-right: 10px;
		color: #9bd2bd;
		filter: brightness(150%);
	}
}

.activityAndArticle {
	padding: 10px;
	width: 100%;
	display: flex;
	height: calc(90vh - 75px);

	&-list {
		height: 40%;
		margin-bottom: 10rpx;
	}
}

.fMore {
	&-wrap {
		width: 100%;
		display: flex;
		flex-flow: row nowrap;
		justify-content: flex-end;
		padding-right: 50upx;
		margin-bottom: 15upx;
	}

	animation: FmovefadeInLeft infinite alternate 1s linear;
}
</style>
